<template>
    <div class="content-wrapper" v-loading.fullscreen.lock="fullscreenLoading">
        <el-row class="content-row">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="140px">
                <el-row>

                    <el-col :span="15">
                        <titleTip title-text="订单详情" v-bind:showTop="true"/>

                        <el-form-item label="订单编号" prop="goodsName">
                            <span>{{addForm.orderNo}}</span>
                        </el-form-item>

                        <el-form-item label="订单状态" prop="minNum">
                            <span v-if="addForm.status == 0">待兑换</span>
                            <span v-if="addForm.status == 1">兑换完成</span>
                            <span v-if="addForm.status == 2">已取消</span>
                            <span v-if="addForm.status == 3">兑换失败</span>
                        </el-form-item>

                        <el-form-item label="来源模块" prop="goodsSpecNum">
                            <span v-if="addForm.source == 1">秒杀</span>
                            <span v-if="addForm.status == 2">星选</span>
                        </el-form-item>
                        <el-form-item label="下单时间" prop="activityStartTime">

                            {{renderTime(addForm.createTime)}}
                        </el-form-item>

                        <el-form-item label="商品Id" prop="goodsId">

                            <span>{{addForm.goodsId}}</span>
                        </el-form-item>

                        <el-form-item label="商品规格" prop="goodsSpec">

                            <span>{{addForm.goodsSpec}}</span>
                        </el-form-item>

                        <el-form-item label="商品数量" prop="num">
                            <span>{{addForm.num}}</span>
                        </el-form-item>

                        <el-form-item label="使用积分" prop="integralNum">
                            <span>{{addForm.integralNum}}</span>
                        </el-form-item>
                        <el-form-item label="用户账号" prop="account">
                            <span>{{addForm.account}}</span>
                        </el-form-item>
                        <titleTip title-text="收货地址" v-bind:showTop="true"/>
                        <el-form-item label="收货地址" prop="address">
                            <span>{{addForm.address}}</span>

                        </el-form-item>

                        <el-form-item label="收货人" prop="consignee">
                            <span>{{addForm.consignee}}</span>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="account">
                            <span>{{addForm.contact}}</span>
                        </el-form-item>

                        <el-form-item label="" prop="account">
                            <el-button type="text" size="small" style="font-size: 16px"
                                       @click="handleUpdate(addForm)">修改地址
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
        </el-row>

        <!-- 新增弹出框 -->
        <el-dialog title="修改收货地址" :visible.sync="updeteVisible" width="35%">
            <el-form ref="addForm" :model="updateForm" :rules="addRules" label-width="100px">
                <el-row style="height: 150px">
                    <el-form-item label="收货地址" prop="title">
                        <el-input v-model="updateForm.address" placeholder="收货地址"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人" placeholder="收货人" prop="url">
                        <el-input v-model="updateForm.consignee"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" placeholder="联系方式" prop="url">
                        <el-input v-model="updateForm.contact"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>

            <span slot="footer" class="dialog-footer2">
                        <el-button @click="updateClose">取 消</el-button>
                        <el-button type="primary" @click="updateReceivingInfo('addForm')">确 定</el-button>
                        </span>
        </el-dialog>

        <!--        <subBannerDeatil v-if='openDialog' v-on:handleclose='subBannerDone' v-bind:editData='editRow' v-bind:index='editIndex'/>-->
    </div>
</template>

<script>

    // import CityTree from './CityTree'
    import titleTip from '../../../../common/titleTip.vue'
    import {getInfo,updateReceivingInfo} from '../../../../api/mall/order'


    export default {
        name: 'orderDetail',

        data() {
            var checkActivityTime = (rule, value, callback) => {
                let applyTime = this.addForm.applyTime;
                let activityTime = value;

                if (applyTime.length > 0 && activityTime.length > 0) {

                    let activityBeginTime = activityTime[0].getTime();
                    let activityEndTime = activityTime[1].getTime();

                    let applyBeginTime = applyTime[0].getTime();
                    let applyEndTime = applyTime[1].getTime();

                    console.log(activityBeginTime, activityEndTime, applyBeginTime, applyEndTime)

                    if (activityEndTime < applyEndTime) {
                        return callback(new Error("活动结束时间不得早于报名结束时间"));
                    } else if (activityBeginTime < applyBeginTime) {
                        return callback(new Error("报名开始时间不得迟于活动开始时间"));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }

            };
            var checkApplyTime = (rule, value, callback) => {
                let applyTime = value;
                let activityTime = this.addForm.time;
                if (applyTime.length > 0 && activityTime.length > 0) {

                    let activityBeginTime = activityTime[0].getTime();
                    let activityEndTime = activityTime[1].getTime();

                    let applyBeginTime = applyTime[0].getTime();
                    let applyEndTime = applyTime[1].getTime();

                    console.log(activityBeginTime, activityEndTime, applyBeginTime, applyEndTime)


                    if (activityEndTime < applyEndTime) {
                        return callback(new Error("活动结束时间不得早于报名结束时间"));
                    } else if (activityBeginTime < applyBeginTime) {
                        return callback(new Error("报名开始时间不得迟于活动开始时间"));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }

            };
            return {
                fullscreenLoading: false,
                updeteVisible: false,
                uploadUrl: 'https://lht.ah-zk.com/qjt/fs/file/upload',
                origin: 'https://lht.ah-zk.com/qjt/fs/origin',
                imageStyle: [
                    // {
                    //     code: "1",
                    //     name: "单图",
                    //     url: require("../../../../assets/img/01.png")
                    // }, {
                    //     code: "2",
                    //     name: "双图",
                    //     url: require("../../../../assets/img/02.png")
                    // }, {
                    //     code: "3",
                    //     name: "三图",
                    //     url: require("../../../../assets/img/03.png")
                    // }, {
                    //     code: "4",
                    //     name: "四图",
                    //     url: require("../../../../assets/img/04.png")
                    // }
                ],updateForm:{
                    id:'',
                    address:'',
                    consignee:'',
                    contact:''
                },
                addForm: {
                    goodsName: '',
                    goodsSpecNum: '',
                    goodsSpecUnit: '',
                    minNum: '',
                    inventoryNum: '',
                    integralNum: '',
                    marketPrice: '',
                    serviceTel: '',
                    headImg: '',
                    carouselImg: '',
                    detailsImg: '',
                    description: '',
                    goodsSpecNum: '',
                    goodsSpecUnit: '',
                    status: ''

                },
                addRules: {
                    goodsName: [
                        {required: true, message: '请输入商品名称', trigger: ['blur', 'change']}
                    ],
                    goodsSpecNum: [
                        {required: true, message: '请输入规格数量', trigger: ['blur', 'change']}
                    ],
                    goodsSpecUnit: [
                        {required: true, message: '请输入规格单位', trigger: ['blur', 'change']}
                    ],
                    minNum: [
                        {required: true, message: '请输入最小售卖单位', trigger: ['blur', 'change']}
                    ],
                    goodsSpecNum: [
                        {required: true, message: '请输入规格数量', trigger: ['blur', 'change']}
                    ],
                    goodsSpecUnit: [
                        {required: true, message: '请输入规格单位', trigger: ['blur', 'change']}
                    ],
                    inventoryNum: [
                        {required: true, message: '请输入库存数量', trigger: ['blur', 'change']}
                    ],
                    integralNum: [
                        {required: true, message: '请输入兑换积分', trigger: ['blur', 'change']}
                    ],
                    marketPrice: [
                        {required: true, message: '请输入市面价格', trigger: ['blur', 'change']}
                    ],
                    serviceTel: [
                        {required: true, message: '请输入客服电话', trigger: ['blur', 'change']}
                    ],
                    headImg: [
                        {required: true, message: '请上传头图', trigger: ['blur', 'change']}
                    ],
                    carouselImg: [
                        {required: true, message: '请上传轮播图片', trigger: ['blur', 'change']}
                    ]
                }
            };
        },
        created() {
            // this.changeStyle();
            // this.getMoreSpace();
            this.loadGoodsDetailInfo();
        },
        components: {
            // subBannerDeatil,
            //CityTree,
            titleTip
        },
        methods: {
            updateReceivingInfo(){
                this.$confirm('确认修改收货信息？', '提示', {
                    type: 'warning'
                }).then(() => {
                    updateReceivingInfo(this.updateForm).then(res => {
                        let ressult = res.data;
                        if (ressult) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.addForm.address =  this.updateForm.address;
                            this.addForm.contact =  this.updateForm.contact;
                            this.addForm.consignee =  this.updateForm.consignee;
                            this.updeteVisible = false;
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'fail'
                            });
                        }
                    })
                })
            },
            handleUpdate() {
                this.updeteVisible = true;
            },
            updateClose() {
                this.updeteVisible = false;

            },
            loadGoodsDetailInfo() {
                let self = this;
                let path = this.$route.fullPath.split("/");
                console.log(path[path.length - 1]);

                let id = path[path.length - 1];

                console.log(id);
                getInfo(id).then(res => {
                    this.addForm = res.data;

                    this.updateForm.id=  res.data.id;
                    this.updateForm.consignee = res.data.consignee;
                    this.updateForm.contact = res.data.contact;
                    this.updateForm.address = res.data.address;
                })

            }
            , onAddExternalRow() {
                let external = {
                    name: '',
                    type: 2,
                    placeholder: '',
                    required: true
                }
                this.externalData.push(external)
            },
            //关闭tab
            closeTab() {
                this.closeTagByName('activityAdd');
            },
            //跳转到选择项目弹出框
            viewCity() {
                this.viewdialog = true;
            },
            //选择项目后的回调
            viewinf(e) {
                this.viewdialog = false;
                this.addForm.cityList = e;
                let cityNames = "";
                if (e.length != 0) {
                    for (let i = 0; i < e.length; i++) {
                        if (i != 0) {
                            cityNames += ",";
                        }
                        cityNames += e[i].cityName;
                    }
                }
                this.addForm.cityName = cityNames;
                this.addForm.scope = '2';
            },

            //图片上传删除图片
            handleRemoveImg(file, fileList) {
                this.uploadImgNum = 0;
                this.addForm.headImg = null;
            },
            //图片放大方法
            handlePictureCardPreviewImg(file) {
                this.dialogImageUrlImg = file.url;
                this.dialogVisibleImg = true;
            },
            //图片上传成功回调
            successUploadImg(response, file, fileList) {
                let f = response.files[0];
                this.addForm.headImg = f.fingerprint;
                this.uploadImgNum = 1;
            },


            //图片上传删除图片
            handleRemoveDetailImg(file, fileList) {
                var deleteFileName = file.response.files[0].fingerprint;
                for (var i = 0; i < this.detailPicList.length; i++) {
                    var fileName = this.detailPicList[i];
                    if (fileName == deleteFileName) {
                        this.detailPicList.splice(i, 1);
                        break;
                    }
                }
                this.uploadDetailImgNum--;
                this.addForm.activityAdvertiseImg = null;
            },
            //图片放大方法
            // handlePictureCardPreviewDetailImg(file) {
            //     this.dialogImageUrlImg = file.url;
            //     this.dialogVisibleImg = true;
            // },
            //图片上传成功回调
            successUploadDetailImg(response, file, fileList) {
                let f = response.files[0];
                //this.addForm.activityAdvertiseImg = f.fingerprint;
                // this.detailPicList.push()
                this.detailsImg.push(f.fingerprint);
                this.uploadDetailImgNum++;

            },

            //图片上传成功回调
            successUploadAdvertiseImg(response, file, fileList) {
                let f = response.files[0];
                //this.addForm.activityAdvertiseImg = f.fingerprint;
                this.carouselImgList.push(f.fingerprint)
                this.uploadAdvertiseImgNum++;

                console.log(this.carouselImgList);
            },

            //图片上传删除图片
            handleRemoveAdvertiseImg(file, fileList) {
                var deleteFileName = file.response.files[0].fingerprint;
                for (var i = 0; i < this.carouselImgList.length; i++) {
                    var fileName = this.carouselImgList[i];
                    if (fileName == deleteFileName) {
                        this.carouselImgList.splice(i, 1);
                        break;
                    }
                }
                this.uploadAdvertiseImgNum--;
                this.addForm.activityAdvertiseImg = null;

                console.log()
            },
            //文件上传时做文件大小判断
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过 200KB!',
                        type: 'warning'
                    });
                }
                return isLt2M;
            },
            onDelExternalRow(row, index) {
                this.externalData.splice(index, 1)
            },
            //提交保存
            saveForm(formName, status) {

                this.addForm.carouselImg = this.carouselImgList.join(",")

                this.addForm.detailsImg = this.detailsImg.join(",")
                if (this.addForm.status === 0) {
                    this.addForm.status = status;
                }

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.fullscreenLoading = true;

                        edit(this.addForm).then(res => {
                            if (res.code == '0') {
                                this.fullscreenLoading = false;
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.resetForm('addForm');
                                this.closeTagByName('goodsDetailEdit');
                                this.$router.push('/mall/goodsDetail/list');
                            } else {
                                this.fullscreenLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                })

            }
        },
        watch:{
            "$route":function(to,from){
                if(this.$route.fullPath === to.fullPath){
                    this.loadGoodsDetailInfo();
                }
            }
        }
    };
</script>

<style scoped>

    .content-wrapper {
        height: 100%;
        overflow-y: scroll;
    }

    .content-row {
        height: 94%;
        overflow-y: scroll;
    }

    .imageFloatLeft {
        width: 40%;
        float: left;
        height: 140px;
        margin-right: 2%;
    }

    .dialog-footer {
        text-align: center;
    }
</style>
